<template>
    <div>
        <el-descriptions title="" direction="vertical" :column="12" border size="small" v-if="mode === 'single'">
            <el-descriptions-item label="账户">
                {{ cpcBalance.productName }}
            </el-descriptions-item>
            <el-descriptions-item label="总余额">
                {{ cpcBalance.totalBalance }}
            </el-descriptions-item>
            <el-descriptions-item label="现金余额">
                {{ cpcBalance.cashBalance }}
            </el-descriptions-item>
            <el-descriptions-item label="红包余额">
                {{ cpcBalance.givenBalance }}
            </el-descriptions-item>
            <el-descriptions-item label="最近同步时间">
                {{ cpcBalance.updateTime }}
            </el-descriptions-item>
            <el-descriptions-item label="是否开启监控">
                <el-switch
                    v-model="cpcBalance.monitorFlag"
                    @change="updateSwitch()">
                </el-switch>
            </el-descriptions-item>
            <el-descriptions-item label="监控阈值">
                {{ cpcBalance.monitorThreshold }}
            </el-descriptions-item>
            <el-descriptions-item label="通知手机号码">
                {{ cpcBalance.monitorMobileNos }}
            </el-descriptions-item>
            <el-descriptions-item label="操作">
                <div>
                    <el-form ref="searchForm" :inline="true" :model="condition.search" label-suffix=""
                             label-width="100px"
                             label-position="left" size="small">
                        <el-row>
                            <el-col>
                                <el-form-item>
                                    <el-button type="success" v-on:click="sync">同步</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </el-descriptions-item>
        </el-descriptions>

        <el-dialog title="设置监控" width="30%" :visible.sync="monitorDialogVisible">
            <el-form :model="monitorForm" label-width="140px" size="small">
                <el-form-item label="是否开启监控">
                    <el-switch v-model="monitorForm.monitorFlag"></el-switch>
                </el-form-item>
                <el-form-item label="监控阈值">
                    <el-input v-model="monitorForm.monitorThreshold"></el-input>
                </el-form-item>
                <el-form-item label="推送手机号码">
                    <el-input v-model="monitorForm.monitorMobileNos"
                              type="textarea"
                              placeholder="推送手机号码"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="monitorDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="monitorConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {getDpCpcBalanceByPage, syncDpCpcBalance, updateDpCpcBalance} from '@/api/api'

export default {
    name: "DpCpcBalance",
    data() {
        return {
            // 分页搜索条件
            condition: {
                page: 1,
                rows: 10,
                total: 0,
                search: {}
            },
            // 表格数据
            tableData: [],
            // 新增或者编辑对话框显示
            addOrUpdateDialogVisible: false,
            // 标题
            addOrUpdateDialogTitle: '新增',
            // 新增或者编辑对话框表单
            addOrUpdateForm: {},
            // 选中行
            selectedRow: {},

            mode: 'single',
            cpcBalance: {},

            monitorDialogVisible: false,
            monitorForm: {},
        }
    },
    // 这里定义需要父组件传过来的东西
    props: {
        shopId: String,
        shopName: String,
        size: {
            type: String,
            default: 'small'
        },
    },
    watch: {
        shopName: function (val, oldVal) {
            this.shopName = val;
        }
    },
    methods: {
        sync() {
            let params = {};
            params.shopId = this.shopId;
            syncDpCpcBalance(params).then(data => {
                if (data.respCode == 1000) {
                    this.getData();
                }
            });
        },
        updateSwitch: function () {
            if (this.cpcBalance.id) {
                this.monitorDialogVisible = true;
                // 深拷贝
                this.monitorForm = Object.assign({}, this.cpcBalance);
            } else {
                // 第一次配置
                this.$message({
                    type: 'error',
                    message: '请先完成首次同步!'
                });
            }
        },
        monitorConfirm: function () {
            updateDpCpcBalance(this.monitorForm).then(data => {
                if (data.respCode == 1000) {
                    this.monitorDialogVisible = false;
                    this.getData();
                }
            });
        },
        // 获取表格数据
        getData: function () {
            if (this.shopId) {
                this.condition.search.shopId = this.shopId;
            }
            getDpCpcBalanceByPage(this.condition).then(data => {
                this.tableData = data.body.rows;
                this.condition.total = data.body.total;
                if (this.tableData.length > 0) {
                    this.cpcBalance = this.tableData[0];
                } else {
                    this.cpcBalance = [];
                }
            });
        },
    },
    created() {
        this.getData();
    },
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}
</style>
